<template>
    <div class="content">
        <div ref="charts" style="width:100%; height: 900px"></div>
    </div>
</template>


<script>
import * as echarts from "echarts";
import china from "./china.json"
import tj from "./tj.json";
import jzq from "./jzq.json";
export default {
    created() {
        this.$nextTick(() => {
            this.initCharts();
        })
    },
    methods: {
        initCharts() {
            const charts = echarts.init(this.$refs["charts"]);
            const option = {
                // 背景颜色
                backgroundColor: "blue",
                // 提示浮窗样式
                tooltip: {
                    show: true,
                    trigger: "item",
                    alwaysShowContent: false,
                    backgroundColor: "#0C121C",
                    borderColor: "rgba(0, 0, 0, 0.16);",
                    hideDelay: 100,
                    triggerOn: "mousemove",
                    enterable: true,
                    textStyle: {
                        color: "#DADADA",
                        fontSize: "12",
                        width: 20,
                        height: 30,
                        overflow: "break",
                    },
                    showDelay: 100
                },
                // 地图配置
                geo: {
                    map: "china",
                    roam: true,
                    scaleLimit: {
                        min: 1,
                        max: 5
                    },

                    zoom: 1,
                    label: {
                        // 通常状态下的样式
                        normal: {
                            show: true,
                            textStyle: {
                                color: "#fff",
                            },
                        },
                        // 鼠标放上去的样式
                        emphasis: {
                            textStyle: {
                                color: "#fff",
                            },
                        },
                    },
                    // 地图区域的样式设置
                    itemStyle: {
                        normal: {
                            borderColor: "#000000", //"rgba(147, 235, 248, 1)",
                            borderWidth: 1,
                            areaColor: {
                                type: "radial",
                                x: 0.5,
                                y: 0.5,
                                r: 0.8,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "green",//"rgba(147, 235, 248, 0)", // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                                    },
                                ],
                                globalCoord: false, // 缺省为 false
                            },
                            shadowColor: "rgba(128, 217, 248, 1)",
                            shadowOffsetX: -2,
                            shadowOffsetY: 2,
                            shadowBlur: 10,
                        },
                        // 鼠标放上去高亮的样式
                        emphasis: {
                            areaColor: "#389BB7",
                            borderWidth: 0,
                            select: {
                                itemStyle: {
                                    color: '#b50205'
                                },
                                label: {
                                    show: false,
                                    textBorderColor: '#fff',
                                    textBorderWidth: 2
                                }
                            }
                        },
                    },
                    regions: [{
                        name: '广东省',
                        itemStyle: {
                            areaColor: 'red',
                            color: 'red'
                        }
                    },
                    {
                        name: '河北省',
                        itemStyle: {
                            areaColor: 'yellow',
                            color: 'yellow'
                        }
                    }],
                },
                graphic: {
                    // 水印类型
                    type: 'text',
                    // 相对于容器的位置
                    left: '10%',
                    top: '10%',
                    // 样式设置
                    style: {
                        // 文本内容
                        text: "智慧校园",
                        // 字体粗细、大小、字体
                        font: 'bolder 1.5rem "Microsoft YaHei", sans-serif',
                        // 字体颜色
                        fill: "#fff"
                    }
                },
                series: [
                    {
                        type: "scatter",
                        coordinateSystem: "geo",
                        symbol: "pin",
                        legendHoverLink: true,
                        symbolSize: [60, 60],
                        // 这里渲染标志里的内容以及样式
                        label: {
                            show: true,
                            formatter(value) {
                                return value.data.value[2];
                            },
                            color: "#fff",
                        },
                        // 标志的样式
                        itemStyle: {
                            normal: {
                                color: "rgba(255,0,0,.7)",
                                shadowBlur: 2,
                                shadowColor: "D8BC37",
                            },
                        },
                        // 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
                        // 至于如何展示，完全是靠上面的formatter来自己定义的
                        data: [
                            {
                                name: "西藏", value: [91.23, 29.5, 2333],
                                emphasis: {

                                    itemStyle: {
                                        color: "#000",
                                        borderColor: "#000"
                                    },
                                }
                            },
                            { name: "黑龙江", value: [128.03, 47.01, 1007] },
                            { name: "天津市", value: [117.5, 39.01, 2007] },
                            { name: "天津市", value: [100, 50, 2007] }
                        ],
                        showEffectOn: "render",
                        rippleEffect: {
                            brushType: "stroke",
                        },
                        hoverAnimation: true,
                        zlevel: 1,
                    },
                    // {
                    //   type: "effectScatter",
                    //   coordinateSystem: "geo",
                    //   effectType: "ripple",
                    //   showEffectOn: "render",
                    //   rippleEffect: {
                    //     period: 10,
                    //     scale: 10,
                    //     brushType: "fill",
                    //   },

                    //   hoverAnimation: true,
                    //   itemStyle: {
                    //     normal: {
                    //       color: "rgba(255, 235, 59, .7)",
                    //       shadowBlur: 10,
                    //       shadowColor: "#333",
                    //     },
                    //   },
                    //   zlevel: 1,
                    //   data: [
                    //     { name: "西藏", value: [91.23, 29.5, 2333] },
                    //     { name: "黑龙江", value: [128.03, 47.01, 1007] },
                    //   ],
                    // },
                ],
            };
            // 地图注册，第一个参数的名字必须和option.geo.map一致
            echarts.registerMap("china", china)
            charts.on('click', (evt) => {
                let name = evt.name
                console.log(evt)
                console.log(name)
                if (name === "天津市") {
                    // 修改option的配置，可以继续自定义
                    option.geo.zoom = 1
                    // 就像上面提到的，这里必须要和注册地图时的名字一致
                    option.geo.map = "tj"
                    // 注册地图
                    echarts.registerMap("tj", tj)
                    // 重新渲染
                    charts.setOption(option, true)
                } else if (name === "蓟州区") {
                    // 修改option的配置，可以继续自定义
                    option.geo.zoom = 1
                    // 就像上面提到的，这里必须要和注册地图时的名字一致
                    option.geo.map = "jzq"
                    // 注册地图
                    echarts.registerMap("jzq", jzq)
                    // 重新渲染
                    charts.setOption(option, true)
                }
            })

            charts.setOption(option);
        },
    },
};



</script>